<template>
  <div class="w-full h-full flex flex-col">
    <div class="px-4 flex   gap-x-4 gap-y-4 justify-end fixed top-4 left-0 z-10 "> 
      <Actions :src="imgSrc" :pdf-url="pdfUrl" />
    </div>
    <div id="img-view" class="flex-1 w-full overflow-auto"> 
      <img :src="imgSrc" alt="" class="w-full md:w-1/2 md:mx-auto  mt-12 object-contain" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getOpfsUrl } from "@/utils/opfs";
import { ref, withDefaults } from "vue";
import useScaleImg from "@/hooks/useScaleImg";
import { computed } from "vue";
import { computedAsync } from "@vueuse/core";
import Actions from './actions.vue'
const props = withDefaults(defineProps<{ src: string, pdfUrl?: string }>(), {});
const visble = ref(true);
const src = computed(() => {
  return props.src;
});

const imgSrc = computedAsync(async () => {
  try {
    return getOpfsUrl(src.value, { mimeType: "image/jpg" });
  } catch (error) {
    return src.value;
  }
});

// useScaleImg({ view: "img-view", isInit: visble, url: imgSrc });
</script>

<style scoped>
/* 弹窗关闭 */
.play-dialog-btn-close {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}
/* 弹窗的图片 */
.play-dialog-img {
  transform: translateY(-50%);
  position: absolute;
  left: 0px;
  top: 50%;
}
</style>
